<template>
  <view class="content" :style="{ paddingTop: H_content + 10 + 'px', paddingBottom: '50px' }">
    <view class="title-area" :style="{ height: H_content + 10 + 'px' }">
      <view :style="{ height: H_top + 'px' }"></view>
      <view class="nav-bar-title" :style="{ fontSize: '36rpx;', height: H_height + 'px', lineHeight: H_height + 'px', textAlign: 'center', color: '#000' }">
        <image @click="search" style="margin-left: 30rpx; height: 50rpx;width: 50rpx;" src="/static/lzl/Search@2x.png" mode=""></image>
        <button :plain="true" open-type="contact" style="border: none;height: 50rpx;width: 50rpx;position: relative;left: 20rpx;">
          <image src="/static/lzl/kefu@2x.png" style="width: 50rpx;height: 50rpx;position: absolute;left: 0;" mode="widthFix"></image>
        </button>
        <!-- <view style="margin-left: 50%;transform: translateX(-100%);font-size: 32rpx;">亚麻艺术家</view> -->
        <view style="margin-left: 50%;transform: translateX(-120%);display: flex;align-items: center; font-size: 32rpx;">
          <image src="/static/lzl/439eab05-488f-43e7-992e-f94f405aeb98 1@2x.png" style="width: 218rpx;height: 64rpx;" mode=""></image>
        </view>
      </view>
    </view>
    <tabBar :top="H_content" numBer="1"></tabBar>
    <!-- 轮播图的功能 -->
    <view style="width: 100%;height: 75vh;">
      <uni-swiper-dot :dots-styles="dotsStyles" :info="Banners" :current="current" field="content" mode="round">
        <swiper :autoplay="autoplay" interval="3000" duration="500" show-center-play-btn="true" class="swiper-box" circular="true" @change="swiperChange">
          <swiper-item v-for="(item, index) in Banners" :key="index">
            <view class="swiper-item" v-show="!splits(item.ad_image)" wx-if="{item}">
              <image v-if="item.ad_image" style="width: 100%;height: 100%;" :src="baseUrl + item.ad_image" mode=""></image>
            </view>
            <view class="swiper-item" v-show="splits(item.ad_image)" v-if="item">
              <video
                :id="'myVideo' + index"
                :autoplay="false"
                :src="baseUrl + item.ad_image"
                controls
                :enable-progress-gesture="false"
                object-fit="cover"
                style="width: 100%;height: 75vh;"
                @play="play"
                @pause="pause"
                @ended="ended"
                auto-pause-if-navigate
                auto-pause-if-open-native
              ></video>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <!-- 通知 -->
    <view class="" @click="activity"><u-notice-bar color="#C3B27F" bg-color="#fff" mode="vertical" type="error" :list="list"></u-notice-bar></view>
    <!-- 下面的商品 -->
    <view v-for="(item, index) in shoopList" :key="index" style="padding: 20rpx; 32rpx">
      <!-- 文字部分 -->
      <view class="title">
        <view class="biao">{{ item.name }}</view>
        <view style="font-size: 28rpx;color: #C3B27F;margin-bottom: 30rpx;">{{ item.enname ? item.enname : '' }}</view>
        <view class="wenzi">{{ item.description }}</view>
      </view>
      <!-- 中间宣传图 -->
      <view class="conduct" @click="toDetlis(item.goods[0])">
        <image :src="item.goods[0].image" style="height: 654rpx;width: 100%;" mode=""></image>
        <!-- 价格 -->
        <view class="tite">{{ item.goods[0].title }}</view>
        <view class="pice">￥{{ item.goods[0].price }}</view>
      </view>
      <!-- 下面的商品 -->
      <view class="shoop">
        <view class="shoop_son" v-for="(ite, ind) in item.goods" @click="toDetlis(ite)" v-if="ind != 0" :key="ind">
          <image :src="ite.image" style="width: 330rpx;height: 400rpx;" mode=""></image>
          <view class="price">
            <view class="bt">{{ ite.title }}</view>
            <view class="btPrice">￥{{ ite.price }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="show" mode="bottom" height="400" border-radius="20" :mask-close-able="false">
      <view class="login">
        <button :plain="true" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
          <image style="width: 100rpx;height: 100rpx;" src="/static/lzl/weixin.png" mode=""></image>
        </button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['H_top', 'H_height', 'H_content'])
  },
  data() {
    return {
      show: false,
      Banners: [
        '/static/lzl/img-home-cp1@2x.png',
        '/static/lzl/img-home-cp1@2x.png',
        'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
        '/static/lzl/img-home-cp1@2x.png'
      ], //轮播图
      list: ['亚麻床品系列 3.31-4.13 满248元享9折优惠'],
      shoopList: [],
      autoplay: true, //自动切换轮播图
      current: 0,
      videoContext: '',
      baseUrl: this.$baseUrl,
      title: 'Hello',
      dotsStyles: {
        backgroundColor: 'rgba(255,255,255,0.4)',
        border: 'rgba(255,255,255,0.4)',
        selectedBackgroundColor: '#fff',
        selectedBorder: '#fff'
      }
    };
  },
  onShow() {
    uni.hideTabBar();
    // 获取轮播图数据
    this.init();
    let token = uni.getStorageSync('token');
    if (token) {
      this.show = false;
    } else {
      this.show = true;
    }
    this.login();
  },
  onShareAppMessage(res) {},
  onLoad() {},
  methods: {
    // 点击跳转详情
    toDetlis(item) {
      // console.log(item);
      uni.navigateTo({
        url: '/pages/details/details?id=' + item.id
      });
    },
    // 点击跳到详情
    // detile() {
    //   uni.navigateTo({
    //     url: '/pages/details/details'
    //   });
    // },
    // 点击顶部的 搜索
    search() {
      uni.navigateTo({
        url: '/pages/search/searchSon/searchSon'
      });
    },
    // 获取轮播图数据
    async init() {
      let tit = await this.$api.roll();
      this.list = tit.data;
      let n = await this.$api.shoopAd();
      this.Banners = n.data;
      let m = await this.$api.home();
      this.shoopList = m.data;
    },
    //获取轮播图里的数据
    // GetBanner() {
    //   this.api.GetBanner().then(res => {
    //     this.Banners = res.data.Data.Banners;
    //   });
    // },
    // 获取数据
    swiperChange(e) {
      let { current, source } = e.detail;
      this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
      //只有手动切换时开始轮播，并且上一页视频暂停
      this.current = current;
      if (source === 'touch') {
        this.videoContext.pause(); //暂停
        this.autoplay = true;
      }
    },

    // 点击活动到活动页
    activity() {
      uni.navigateTo({
        url: '/pages/activity/activity'
      });
    },
    // 处理banner返回的是是视频还是图片
    splits(url) {
      if (url.indexOf('.') != -1) {
        var ext = url.substring(url.lastIndexOf('.') + 1);
        return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1;
      }
    },
    // 点击开始/继续播放
    play() {
      this.autoplay = false;
      this.videoContext.requestFullScreen();
    },
    // 视频暂停
    pause() {
      this.autoplay = true;
    },
    // 视频结束
    ended() {
      this.autoplay = true;
    },
    addess() {
      uni.navigateTo({
        url: '/pages/address/address'
      });
    },
    // 点击客服会话
    contact(e) {
      console.log(e, '1111111');
    },
    login() {
      let state = null;
      let n = uni.getStorageSync('session_id');
      if (n) {
        state = true;
      } else {
        state = false;
      }
      uni.login({
        provider: 'weixin',
        success: async res => {
          let n = await this.$api.session_id({
            autoLogin: state,
            code: res.code
          });
          console.log(n, '=====');
          uni.setStorageSync('session_id', n.data.session_id);
        },
        fail: res => {
          console.log(res, '失败');
        }
      });
    },
    async decryptPhoneNumber(e) {
      console.log(e);
      let session_id = uni.getStorageSync('session_id');
      // 获取token
      let m = await this.$api.login({
        code: e.detail.code,
        encryptedData: e.detail.encryptedData,
        event: 'login',
        iv: e.detail.iv,
        session_id: session_id
      });
      console.log(m);
      uni.setStorageSync('token', m.data.token);

      if (m.code == 1) {
        this.$msg('登陆成功');
        this.show = false;
        this.init();
        // uni.reLaunch({
        //   url: '/pages/index/index'
        // });
      }
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.u-notice-bar {
  padding: 30rpx 24rpx !important;
}
.login {
  button {
    background-color: #fff;
    border: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
    border: none;
  }
}
.shoop {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .shoop_son {
    width: 330rpx;
    margin-bottom: 32rpx;
    .price {
      text-align: center;
      .bt {
        margin-top: 16rpx;
        margin-bottom: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0a0a09;
        overflow: hidden; //超出文本隐藏

        text-overflow: ellipsis; ///超出部分省略号显示

        display: -webkit-box; //弹性盒模型

        -webkit-box-orient: vertical; //上下垂直

        -webkit-line-clamp: 2; //自定义行数
      }
      .btPrice {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #5c5a55;
        line-height: 48rpx;
      }
    }
  }
}
.conduct {
  margin-bottom: 32rpx;
  .tite {
    margin-top: 20rpx;
    margin-bottom: 15rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #0a0a09;
    overflow: hidden; //超出文本隐藏

    text-overflow: ellipsis; ///超出部分省略号显示

    display: -webkit-box; //弹性盒模型

    -webkit-box-orient: vertical; //上下垂直

    -webkit-line-clamp: 1; //自定义行数
  }
  .pice {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #5c5a55;
  }
}
.title {
  margin-top: 28rpx;
  text-align: center;
  margin-bottom: 16rpx;
  .biao {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .wenzi {
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
}
.title-area {
  z-index: 99999999;
  width: 100%;
  background-color: #fff;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
}

.nav-bar-title {
  display: flex;
  // justify-content: ;
  align-items: center;
}
.tit {
  font-size: 32rpx;
  font-family: 'DingTalk JinBuTi-Regular, DingTalk JinBuTi';
  font-weight: 400;
  color: #322922;
  margin-left: 30%;
}
.swiper-box {
  height: 75vh;
  width: 100%;
  .swiper-item {
    height: 100%;
    width: 100%;
  }
}
</style>
